<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <table border="1px" width="800px">
    <tr>
      <th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>手机</th><th>住址</th>
    </tr>
    <tr v-for="stu in students">
      <td>{{stu.id}}</td>
      <td>{{stu.name}}</td>
      <td>{{stu.age}}</td>
      <td>{{stu.gender}}</td>
      <td>{{stu.cellphone}}</td>
      <td>{{stu.address}}</td>
    </tr>
  </table>
</div>
<!--    导入vue的js文件-->
<script src="js/vue.min.js"></script>
<!--    导入axios文件-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  //创建Vue
  new Vue({
    el: '#app',
    data: {
      students: [] //学生集合
    },
    methods:{
      //连接后台，加载学生数据
      loadStudents(){
        //调用axios方法 get\post\delete\put 向后台发出请求
        //then是处理数据
        axios.get('http://localhost:8080/findAll')
                .then(result => {
                  console.log(result.data)
                  if(result.data.data){
                    //绑定后台的数据到前面的模型中
                    this.students = result.data.data;
                  }
                });
      }
    },
    //组件挂载完成后调用加载学生方法
    mounted() {
      this.loadStudents();
    }
  })
</script>
</body>
</html>